16 Entendendo o que fizemos

Durante o vídeo, renomeamos o arquivo client/index.html para client/main.html. Nosso objetivo era gerar o arquivo index.html dentro de client/dist com todos os outros arquivos gerados pelo Webpack.

Além de renomear o arquivo, foi preciso remover todas as tags <link> e <script> que importam arquivos CSS e JavaScript respectivamente.

Tendo a certeza sobre as alterações feitas anteriormente, modificamos o arquivo client/webpack.config.js. O primeiro passo foi importar e adicionar o plugin como primeiro da nossa lista:

// client/webpack.config.js

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack');

// importou o novo plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

let plugins = []

// adicionou como primeiro da lista
plugins.push(new HtmlWebpackPlugin({
    hash: true,
    minify: {
        html5: true,
        collapseWhitespace: true,
        removeComments: true,
    },    
    filename: 'index.html',
    template: __dirname + '/main.html',
}));

// código posterior omitido

O plugin recebeu um objeto como parâmetro com as seguintes configurações:

hash: quando true, adiciona um hash no final da URL dos arquivos script e CSS importados no arquivo HTML gerado, importante para versionamento e cache no navegador. Quando um bundle diferente for gerado, o hash será diferente e isso é suficiente para invalidar o cache do navegador, fazendo-o carregar o arquivo mais novo.

minify: recebe um objeto como parâmetro com as configurações utilizadas para minificar o HTML. Podemos consultar todas as configurações possíveis no endereço https://github.com/kangax/html-minifier#options-quick-reference.

filename: o nome do arquivo HTML que será gerado. Respeitará o valor do path de output que já configuramos logo no início da criação do arquivo webpack.config.js.

template: caminho do arquivo que servirá como template para geração de index.html.

Por fim, fizemos outra alteração. Como o arquivo index.html gerado ficou em client/dist/index.html, ajustamos o caminho dos imports dos scripts e dos estilos. Para isso, vamos removemos a propriedade publicPath da chave output:

// client/webpack.config.js

// código anterior omitido 

module.exports = {
    entry: {
        app: './app-src/app.js',
        vendor: ['jquery', 'bootstrap', 'reflect-metadata']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')       
        /* removeu publicPath */
    },
// código posterior omitido

Pronto. Ao realizarmos um teste com a criação de um build de desenvolvimento, por exemplo, com o comando npm:

npm run build-dev

Analisando client/dist, vemos que o arquivo index.html foi gerado:

├── 448c34a56d699c29117adc64c43affeb.woff2
├── 89889688147bd7575d6327160d64e760.svg
├── bundle.js
├── e18bbf611f2a2e43afc071aa2f4e1512.ttf
├── f4769f9bdb7466be65088239c12046d1.eot
├── fa2772327f55d8198301fdb8bcfc8158.woff
├── index.html
├── styles.css
└── vendor.bundle.js

Nossa solução funciona para o build de produção e também quando estamos usando o Webpack Dev Server.